<template>
  <div class="item">
    <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)" />
    <!-- 这种方法也能实现同样功能，但是违反了不能修改props内属性的原则 -->
    <!-- <input type="checkbox" v-model="todo.done" /> -->
    <label v-show="!todo.isEdit">{{todo.title}}</label>
    <button v-show="!todo.isEdit" class="edit btn-edit" @click="handlerEdit(todo)">编辑</button>
    <button class="delete btn-danger" @click="handleDelete(todo.id)">删除</button>
    <input
      class="edit"
      type="text"
      v-show="todo.isEdit"
      :value="todo.title"
      @blur="handlerBlur(todo,$event)"
      ref="inputTitle"
    />
  </div>
</template>

<script>
// 引入消息订阅js
import pubsub from 'pubsub-js'

export default {
  name: 'Item',
  props: ['todo'],
  methods: {
    handleCheck (id) {
      // 发布订阅
      pubsub.publish('checkTodo', id)

    },
    handleDelete (id) {
      if (confirm('确定要删除吗？')) {
        pubsub.publish('deleteItem', id)
      }
    },
    handlerEdit (todo) {
      // 对于直接修改对象中的数据，数据不是响应式
      // todo.isEdit = true
      // 使用$set方法添加的数据才是响应式
      if (!todo.hasOwnProperty('isEdit')) {
        console.log('设置了isEdit');
        this.$set(todo, 'isEdit', true)
      } else {
        todo.isEdit = true
      }
      // Vue会等待函数内所有代码执行完才重新解析模板，因此这行代码执行时，input框还不存在，因此不奏效
      // this.$refs.inputTitle.focus()
      // 解决方案1：设置定时器（异步）
      // setTimeout(() => {
      //   this.$refs.inputTitle.focus()
      // }, 0);
      // 解决方案2：$nextTick(callback)方法，nextTick的回调会等模板更新完成后执行
      this.$nextTick(() => {
        console.log(this);
        this.$refs.inputTitle.focus()
      })
    },
    handlerBlur (todo, e) {
      todo.isEdit = false
      // 输入的标题不能为空
      if (!e.target.value.trim()) return alert('输入不能为空')
      this.$bus.$emit('updateTodo', todo.id, e.target.value)
    }
  }
}
</script>

<style scoped>
input {
  zoom: 110%;
}

.item {
  position: relative;
  border: 1px solid #d1d1d1;
  border-radius: 5px;
  padding: 10px;
}

.item:hover {
  background-color: #ddd;
}

.item button {
  position: absolute;
  display: none;
  border: none;
  border-radius: 5px;
  padding: 5px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
}

.item .delete {
  top: 7px;
  right: 10px;
}

.item .edit {
  top: 7px;
  right: 50px;
}

.item:hover button {
  display: block;
}

.edit {
  outline: none;
  margin-left: 10px;
}

label {
  margin-left: 10px;
}
</style>
